<template>
  <div>
    <CityHeader></CityHeader>
    <CitySearch :cities="cities"></CitySearch>
    <CityList 
      :cities="cities" 
      :hotCities="hotCities"
      :letter="this.letter"></CityList>
    <CityAlphabet 
      :cities="cities" 
      @change="handleLetterChange">
    </CityAlphabet>
  </div>
</template>

<script>
//导入城市选择页面头部组件
import CityHeader from './components/Header.vue'
//导入城市选择页面搜索组件
import CitySearch from './components/Search.vue'
//导入城市名称列表组件
import CityList from './components/List.vue'
//导入城市字母表组件
import CityAlphabet from './components/Alphabet.vue'
//导入axios
import axios from 'axios'

export default {
  data(){
    return{
      cities:{},//存储字母列表对应的城市名称
      hotCities:[],//存储热门城市的数据
      letter:''//存储子组件中被点击的字母
    }
  },
  components:{
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet 
  },
  created(){
    this.getCityInfo()
  },
  methods:{
    getCityInfo(){//获取city页面数据
      axios.get('/api/city.json').then(this.handleGetCityInfoSucc)
    },
    handleGetCityInfoSucc(res){
      if (res.data.ret&&res.data.data) {
        this.cities=res.data.data.cities
        this.hotCities=res.data.data.hotCities
      }
    },
    handleLetterChange(letter){//获取子组件中点击的字母
      this.letter=letter
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
